<template>
    <div class="template">
      <!-- Tree筛选 -->
        <div id="CategoryTree" style="width: 180px">
            <el-input
                @clear="officeWaitingDealWithTaskClear"
                placeholder="输入关键字进行过滤"
                clearable
                v-model="filterText">
            </el-input>
            <el-tree
                class="filter-tree"
                :data="dataCategory"
                :props="defaultCategoryProps"
                default-expand-all
                :filter-node-method="filterCategoryNode"
                ref="tree"
                show-checkbox
                node-key="categoryId"
                :check-strictly="true"
                @check-change="handleCheckChange"
                @node-click="nodeClick">
                <!-- 处理菜单内容过长 -->
                <span class="custom-tree-node" slot-scope="{ node }">
                    <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
                        <span > {{ node.label | ellipsis(8) }} </span>
                    </el-tooltip>
                </span>
            </el-tree>
          </div>
          <div id="pageList" style="margin-left: 20px;">
            <div class="addActBtCategory">
                <div style="float: left;display: flex;">
                    <el-input
                            @clear="officeWaitingDealWithTaskClear"
                            clearable
                            style="margin-right: 8px;"
                            class="officeWaitingDealWithTaskClear"
                            prefix-icon="el-icon-search"
                            placeholder="请输入流程定义名称"
                            v-model="page.processDefinitionName"
                            @keydown.enter.native="officeWaitingDealWithTaskQuery">
                    </el-input>
                    <el-input
                            @clear="officeWaitingDealWithTaskClear"
                            clearable
                            style="margin-right: 8px;"
                            class="officeWaitingDealWithTaskClear"
                            prefix-icon="el-icon-search"
                            placeholder="请输入流程任务名称"
                            v-model="page.taskName"
                            @keydown.enter.native="officeWaitingDealWithTaskQuery">
                    </el-input>
                    <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="officeWaitingDealWithTaskQuery">查询</el-button>
                </div>

                <div style="display: flex;justify-content: flex-end">
                    <el-button
                            type="primary"
                            @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
                    </el-button>
                </div>
            </div>
            <!-- 列表 -->
            <div>
            <el-table
                    :data="OfficeWaitingDealWithTaskList"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="正在加载..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-table-column
                        label="流程名称"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.processDefinitionName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="任务名称"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.taskName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="实例名称"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.processInstanceName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="任务类型"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.taskType }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="签收者"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.assignee }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="业务类型"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.businessType }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="开始时间" width="150">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="截止时间" width="150">
                    <template slot-scope="scope">
                        <span v-if="scope.row.dueDate!=null">{{scope.row.dueDate| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="290">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                style="color: lightsalmon;"
                                title="通过流程实例编号获取审批信息"
                                @click="TaskCommentByProcessInstanceId(scope.row)"><i class="el-icon-view"></i>详情</el-button>
                        <el-button
                                type="text"
                                v-if="scope.row.suspended==2"
                                disabled
                                title="审批流程挂起"
                                @click="auditPass(scope.row)"><i class="el-icon-upload"></i>通过</el-button>
                        <el-button
                                type="text"
                                v-if="scope.row.suspended==1"
                                title="审核通过常用操作"
                                @click="auditPass(scope.row)"><i class="el-icon-upload"></i>通过</el-button>
                        <el-button
                                v-if="scope.row.suspended==2"
                                disabled
                                type="text"
                                title="审批流程挂起"
                                @click="ProcessHandling(scope.row)"><i class="el-icon-rank"></i>办理</el-button>
                        <el-button
                                v-if="scope.row.suspended==1"
                                type="text"
                                title="流程办理高级操作(驳回|终止|委派|转办)"
                                @click="ProcessHandling(scope.row)"><i class="el-icon-rank"></i>办理</el-button>
                        <el-button
                                v-show="scope.row.taskType != '非签收型'"
                                type="text"
                                title="签收型任务若发现无法办理可以取消签收待其他候选人签收办理"
                                @click="CancellationSignatures(scope.row)"><i class="el-icon-delete"></i>取消签收</el-button>
                        <el-button
                                v-show="scope.row.taskType == '非签收型'"
                                disabled
                                type="text"
                                title="非签收型任务无法取消签收"
                                @click="CancellationSignatures(scope.row)"><i class="el-icon-delete"></i>取消签收</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
            </div>
        </div>
        <!-- 通过弹框-->
        <div>
          <el-dialog
            title="通过"
            :visible.sync="viewPass"
            width="60%"
          >
          <div>
              <el-form :model="CompleteTaskVO" :rules="rules" ref="CompleteTaskVOForm">
                  <el-row>
                      <el-col>
                          <el-form-item label="审批人员:" prop="assignee">
                              <el-select filterable v-model="CompleteTaskVO.assignee" placeholder="请选择审批人员" style="width: 860px;margin-right: 150px;" clearable>
                                 <el-option-group
                                   v-for="group in DepartmentGroupViewUserList"
                                   :key="group.institutionsId"
                                   :label="group.institutionsName">
                                   <el-option
                                     v-for="item in group.children"
                                     :key="item.userId"
                                     :label="item.realName"
                                     :value="item.realName">
                                   </el-option>
                                 </el-option-group>
                               </el-select>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                        <el-col>
                            <el-form-item label="批注意见:" prop="notation">
                                <el-input type="textarea"
                                    :rows="4"
                                    style="width: 860px;margin-right: 150px;" prefix-icon="el-icon-edit" v-model="CompleteTaskVO.notation"
                                          ></el-input>
                            </el-form-item>
                        </el-col>
                  </el-row>
              </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="viewPass = false">取 消</el-button>
              <el-button type="primary" @click="CompleteTaskAndNoSpecifiedExecutorAssign">确 定</el-button>
          </span>
          </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    name:"officeWaitingDealWithTask",
    data(){
        return{
            filterText: '',
            // 查询目录属性设置
            defaultCategoryProps:{
                children: 'children',
                label: 'categoryName'
            },
            // 初始化目录
            dataCategory:[],
            loading: false,
            page:{
              processDefinitionName:'',
              taskName:'',
              deploymentCategory:'',
              pageNum:1,
              pageSzie:10
            },
            OfficeWaitingDealWithTaskList:[],
            multipleSelection:[],
            CompleteTaskVO:{
              taskId:'',
              assignee:'',
              notation:'情况属实，同意！'
            },
            TaskSigningAssignmentVO:{
              taskId:''
            },
            DepartmentGroupViewUserList:[],
            viewPass: false,
            total:0,
            // 校验规则
            rules: {
                assignee:{required:true,message:'请输入审核人员',trigger:'blur'},
                notation:{required: true, message: '请输入批注意见', trigger: 'blur'}
            }
        }
    },
    mounted(){
        // 初始化模型类别列表
        this.officeWaitingDealWithTaskQuery();
        this.ProcessModelCategoryTreeSelects();
    },
  methods:{
      // 流程办理--高级操作
      ProcessHandling(data){
        this.$router.push({
            path: '/ProcessHandlingPage',
            // 参数传递
            query: {
                processInstanceId:data.processInstanceId,
                viewPage:'officeWaitingDealWithTask'
            }
        })
      },
     auditPass(data){
       this.CompleteTaskVO.taskId = data.taskId;
       this.viewPass = true;
       this.selectDepartmentGroupViewUserList();
     },
    // 审核通过
    CompleteTaskAndNoSpecifiedExecutorAssign(){
      this.$refs['CompleteTaskVOForm'].validate(valid => {
        this.putRequest("/activity/WaitingDealWithTask/update/CompleteTaskAndNoSpecifiedExecutorAssign",this.CompleteTaskVO).then(resp => {
            if (valid) {
              if (resp) {
                this.officeWaitingDealWithTaskQuery();
                this.viewPass = false;
              }
            }
        });
      })
    },
    //  按部门分组查询人员
    selectDepartmentGroupViewUserList(){
      this.getRequest("/account/BtAccountUser/select/DepartmentGroupViewUserList").then(resp => {
          if (resp) {
             this.DepartmentGroupViewUserList = resp.data;
          }
      });
    },
    // 取消签收
    CancellationSignatures(data){
      this.TaskSigningAssignmentVO.taskId = data.taskId;
      this.putRequest("/activity/WaitingDealWithTask/update/CancelTaskSigningAssignment",this.TaskSigningAssignmentVO).then(resp => {
          if (resp) {
              this.officeWaitingDealWithTaskQuery();
          }
      });
    },
    officeWaitingDealWithTaskClear(){
      this.resetCondition();
    },
    // 详情
    TaskCommentByProcessInstanceId(data){
       this.$router.push({
           path: '/TaskComment',
           // 参数传递
           query: {
               processInstanceId:data.processInstanceId,
               viewPage:'officeWaitingDealWithTask'
           }
       })
    },
   // 重置查询条件
    resetCondition(){
        this.$refs.tree.setCheckedNodes([]);
        this.filterText = '';
        this.page.deploymentCategory = '';
        this.page.taskName = '';
        this.page.processDefinitionName = '';
        this.officeWaitingDealWithTaskQuery();
    },
  // 菜单目录选择
    handleCheckChange(data, checked, node){
        if(checked == true){
            this.filterText = data.categoryName;
            this.page.deploymentCategory = data.categoryId;
            this.$refs.tree.setCheckedNodes([data]);
        }
    },
    nodeClick(data,checked,node){
        this.filterText = data.categoryName;
        this.page.deploymentCategory = data.categoryId;
        this.$refs.tree.setCheckedNodes([data]);
    },
    // 目录节点过滤
    filterCategoryNode(value,dataCategory){
        if (!value) return true;
        return dataCategory.categoryName.indexOf(value) !== -1;
    },
    // 获取目录
    ProcessModelCategoryTreeSelects(){
        this.getRequest("/activity/ActBtCategory/query/ProcessModelCategoryTree").then(resp => {
            if (resp) {
                this.dataCategory = resp.data;
            }
        });
    },
    officeWaitingDealWithTaskQuery(){
        this.loading = true;
        this.postRequest("/activity/WaitingDealWithTask/query/WaitingDealWithTaskPageList",this.page).then(resp => {
            this.loading = false;
            if (resp) {
                this.OfficeWaitingDealWithTaskList = resp.data.list;
                this.total = resp.data.total;
            }
        });
    },
    // 分页
    sizeChange(currentSize) {
        this.page.pageSize = currentSize;
        this.officeWaitingDealWithTaskQuery();
    },
    currentChange(currentPage) {
        this.page.pageNum = currentPage;
        this.officeWaitingDealWithTaskQuery();
    }
    }
}
</script>

<style>
    .officeWaitingDealWithTaskClear{
        width: 300px;margin-right: 8px;
    }
    .addActBtCategory{
        margin-bottom: 10px;
    }

    #CategoryTree{
        width: 180px;
        border: 1px solid #E7E7E7;
        height: 730px;
    }

    .filter-tree{
        overflow: auto;
        flex: 1;
        width: 170px;
        height: 600px;
        margin:  10px;
    }

     #CategoryTree #pageList{
        display: flex;
        justify-content: flex-end;
        flex: 1;
    }
    .template{
        display: flex;
    }
</style>
